Release 2.0 #19

Prashant-7718 · 2025-02-10T15:44:00Z

Local code edit and preview
Panel control options : zoom in out, pan
Syntax highlighting
vscode theme for mermaid light and dark
Commands: Logout, login
Right click menu option : Preview Diagram
Global settings for theme
code lenses integration with Aux files : .htm, md, .hugo
Automatic connect to mermaid chart
key binding for cnt + s or cmd + s for saving diagram to mermaid chart and local

sidharthv96 · 2025-02-10T15:47:26Z

package.json

+        "aliases": [
+          "Mermaid Flowchart",
+          "mermaid flowchart"
+        ],


Do we really need the aliases in both cases?

Actually it is not really needed but it is good to keep to avoid edge cases where Other VSCode extensions might refer to the language using different casing.

sidharthv96 · 2025-02-10T15:48:47Z

package.json

        "command": "mermaidChart.editMermaidChart",
+        "title": "Edit Diagram in Mermaid chart"
+      },
+      {
+        "command": "mermaidChart.editLocally",
        "title": "Edit Diagram"
      },


Doesn't these two need the MermaidChart: prefix?

No, these commands are not exposed to users, so they do not need the MermaidChart: prefix. Instead, I have removed them from package.json

sidharthv96 · 2025-02-10T15:49:39Z

webview/package.json

+    "vite": "^6.0.7"
+  },
+  "dependencies": {
+    "@mermaid-chart/mermaid": "11.4.1-b.2",


I don't think this package is public.

Yes it is not public and because of this we decided to make vs code plugin repository private.

sidharthv96 · 2025-02-10T15:50:13Z

webview/pnpm-lock.yaml

Please setup PNPM workspace properly, there should only be one pnpm-lock.yaml file.

sidharthv96 · 2025-02-10T15:50:59Z

webview/src/App.svelte

+  .icon:hover {
+    box-shadow: 0px 0px 4px var(--shadow-color);
+    background-color: var(--shadow-color);
+  }
+svg {
+    width: 25px;
+    height: 25px;
+    transition: stroke 0.3s, fill 0.3s; 
+  }
+  .icon.active {
+  background-color: var(--shadow-color);
+  box-shadow: 0px 0px 4px var(--shadow-color);
+}
+
+  .icon span {
+    width: 20px;


Please run prettier on all the files (or setup properly in the repo)

sidharthv96 · 2025-02-11T15:42:09Z

src/commands/createFile.ts

+      }
+
+      const document = activeEditor?.document;
+      if (document && document?.languageId !== "plaintext" && !document.fileName.endsWith(".mmd") && !document.fileName.endsWith(".mermaid") && !document.languageId.startsWith('mermaid')) {


document? is not required if document && is already checked.

sidharthv96 · 2025-02-11T15:43:38Z

src/extension.ts

+)
+  vscode.workspace.onWillSaveTextDocument(async (event) => {
+    if (event.document.languageId.startsWith("mermaid")) {
+      event.waitUntil(Promise.resolve([]));


Why is this required?

The onWillSaveTextDocument event is used to sync changes from the local file to Mermaid Chart. The event.waitUntil(Promise.resolve([])) prevents unintended modifications from other extensions (such as formatters or linters), ensuring that the file remains unchanged during the save process.

How does it do that, can you share some docs for that, and add a comment there?

sidharthv96 · 2025-02-11T15:45:03Z

src/mermaidAPI.ts

+  public async saveDocumentCode(code: string, documentID: string): Promise<MCDocument> {
+      const response = await this.axios.patch(this.URLS.rest.documents.patch(documentID), {
+        code: code,
+      });
+      return response.data;
+  }
+  public async createDocumentWithDiagram(code: string, projectID: string): Promise<MCDocument> {
+    const response = await this.axios.post(this.URLS.rest.projects.get(projectID).documents, {
+      code : code
+    });
+    return response.data;
+}
+


Use the mermaidchart SDK instead of custom code.

https://github.com/Mermaid-Chart/plugins/tree/main/packages/sdk

Okay, @sidharthv96. Since the custom API code is already in place, can we create a separate ticket to migrate to the MermaidChart SDK later based on our current priorities?

sidharthv96 · 2025-02-11T15:47:40Z

src/syntaxHighlighter.ts

+import * as fs from 'fs';
+import * as vscode from 'vscode';
+
+export function getFirstWord(text: string): string {


See https://github.com/mermaid-js/mermaid/blob/c0187101e9cb3ea9d1966575efcd80ebb6a9a203/packages/mermaid/src/preprocess.ts on how we handle this inside mermaid, the same approach is preferred, instead of custom parsing logic

sidharthv96 · 2025-02-11T15:48:01Z

src/templates/previewTemplate.ts

+    <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <title>Svelte Mermaid Preview</title>


Suggested change

<title>Svelte Mermaid Preview</title>

<title>Mermaid Preview</title>

This reverts commit b236324.

sidharthv96 · 2025-02-18T11:22:28Z

src/diagramTypeWords.json

+  "architecture": [
+   "architecture"
+  ],
+  "packet": [
+    "packet"
+  ],


Aren't these in beta as well? Double check all the diagrams for beta.

sidharthv96 · 2025-02-18T11:23:08Z

src/extension.ts

-        activeEditor.document,
-        comments
-      );
+      let mermaidChartTokens


Add type to this.

sidharthv96 · 2025-02-18T11:23:55Z

src/extension.ts

+    })
+  );
+  const syncFileToMermaidChart = async (document: vscode.TextDocument) => {
+    if (document.languageId.startsWith("mermaid")) {


Early return.

sidharthv96 · 2025-02-18T11:26:43Z

src/frontmatter.ts

+export function extractIdFromCode(code: string): string | null {
+    const { frontMatter } = splitFrontMatter(code);
+    if (!frontMatter) return null; // No frontmatter present
+
+    const document = parseFrontMatterYAML(frontMatter);
+    const id = document.contents.get('id');
+
+    return typeof id === 'string' ? id : null; // Ensure 'id' is a string
+}
+


Use undefined instead of null

sidharthv96 · 2025-02-18T15:23:30Z

src/frontmatter.ts

+const frontMatterRegex = /^-{3}\s*[\n\r](.*?[\n\r])-{3}\s*[\n\r]+/s;
+const YAML_BLOCK_REGEX = /^\s*---[\r\n]+([\s\S]+?)[\r\n]+\s*---/gm;
+const EMPTY_BLOCK_REGEX = /^\s*---\s*\n\s*---\s*\n?/;
+const COMMENT_REGEX = /^\s*%%(?!{)[^\n]+\n?/gm;
+const DIRECTIVE_REGEX = /%{2}{\s*(?:(\w+)\s*:|(\w+))\s*(?:(\w+)|((?:(?!}%{2}).|\r?\n)*))?\s*(?:}%{2})?/gi;
+const FIRST_WORD_REGEX = /^\s*(\w+)/;
+
+export const anyCommentRegex = /\s*%%.*\n/gm;
+
+function parseFrontMatterYAML(frontMatterYaml: string): Document<YAMLMap, false> {
+    const document: Document = parseDocument(frontMatterYaml);
+    if (!isMap(document.contents)) {
+      document.contents = new YAMLMap();
+    }
+    return document as unknown as Document<YAMLMap, false>;
+}
+
+function splitFrontMatter(text: string) {
+    const matches = text.match(frontMatterRegex);
+    if (!matches || !matches[1]) {
+      return {
+        diagramText: text,
+        frontMatter: '',
+      };
+    } else {
+      return {
+        diagramText: text.slice(matches[0].length),
+        frontMatter: matches[1],
+      };
+    }
+}


Check if you can use mermaid's internal functions to parse these, no need to duplicate.

sidharthv96 · 2025-02-18T15:26:40Z

webview/src/App.svelte

+
+    const element = document.getElementById("mermaid-diagram");
+    if (element && diagramContent) {
+      if (diagramContent === " ") { 


Why are we checking for an empty space?

sidharthv96 · 2025-02-18T15:27:19Z

webview/src/App.svelte

+        const currentPan = panzoomInstance?.getPan() || { x: 0, y: 0 };
+        const { svg } = await mermaid.render("diagram-graph", diagramContent);
+        element.innerHTML = svg;
+        if (theme && (theme === "dark" || theme === "neo-dark" )) {


Suggested change

if (theme && (theme === "dark" || theme === "neo-dark" )) {

if (theme?.endsWith("dark")) {

sidharthv96 · 2025-02-18T15:27:54Z

webview/src/App.svelte

+        }
+
+        if (isToggled) {


Suggested change

}

if (isToggled) {

} else {

removed toggle as it is not in use

sidharthv96 · 2025-02-18T15:28:24Z

webview/src/App.svelte

+          type: "error",
+          message: errorMessage,
+        });
+        isErrorOccured = true


nit:

Suggested change

isErrorOccured = true

hasErrorOccured = true

sidharthv96 · 2025-02-18T15:29:44Z

webview/src/ZoomInIcon.svelte

+<script>
+    export let fill;
+  </script>


Prashant-7718 added 30 commits January 8, 2025 15:40

Added logout command

1ac7782

Create mermaid Diagram using CDN

c9abbeb

mermaid from bundles

27ed2df

added svelte app

a3c0cb8

folder name change to webview

35036a9

panzoom images added

72bd262

Added syntaxhighlighting and mermaid light theme

96c72ba

Added dynamic syntax highlighting and mermaid Dark theme

f9ea0dc

resolved %% issue for dynamic syntax highlighting

63f7c1f

file save to local added

70da6ab

Updated script to add svelte app while compiling

c310d2e

removed unwanted files

4778863

Ui updated for diagram and error messages

5963760

Single preview for all the file

9ed4cf1

Toggle added for panzoom

8051063

Added packages

8757920

Updated the ToggleButton to be ON by default

0f1b22d

Added dynamic preview theme

c16a055

Updates code for reseting the panzoom after opening new file

37c9824

merged changes related to preview and error on hover

1c4d288

resolved unnecessary updates

5cd6d89

Added zoom level indicator

d932e81

Added font-awesome cdn

496f97e

Added Theme to the PanZoom Panel

fe4ee29

Fix some issues

2d7987c

Added utility wrapper for passing messages

8d6b9c3

Save code to mermaid chart

12cb8cf

Added key biniding

0f078c1

Completed syntax highlighting for remaining diagrams

f6bd6fc

Added theme settings for users

043599e

Prashant-7718 added 3 commits February 7, 2025 18:18

Added plugin support for Aux files

db8b2b1

updated code for .rst files

48502d9

Added support for .rst files

297d1bc

Prashant-7718 requested review from sidharthv96 and knsv February 10, 2025 15:48

sidharthv96 requested changes Feb 11, 2025

View reviewed changes

Prashant-7718 added 6 commits February 12, 2025 15:28

refactor and updated code

c1604ab

Refactor svelte app function for improved clarity & efficiency

d37e96d

configured prettier

b236324

Revert "configured prettier"

8ef04df

This reverts commit b236324.

Used yaml library for yaml block

8ca7cfc

setup pnpm workspace

ddf5b5a

sidharthv96 requested changes Feb 18, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Release 2.0 #19

Release 2.0 #19

Prashant-7718 commented Feb 10, 2025

sidharthv96 Feb 10, 2025

Prashant-7718 Feb 12, 2025

sidharthv96 Feb 10, 2025

Prashant-7718 Feb 12, 2025

sidharthv96 Feb 10, 2025

Prashant-7718 Feb 12, 2025

sidharthv96 Feb 10, 2025

sidharthv96 Feb 10, 2025

sidharthv96 Feb 11, 2025

sidharthv96 Feb 11, 2025

Prashant-7718 Feb 12, 2025

sidharthv96 Feb 18, 2025

sidharthv96 Feb 11, 2025

Prashant-7718 Feb 12, 2025

sidharthv96 Feb 11, 2025

sidharthv96 Feb 11, 2025

sidharthv96 Feb 18, 2025

sidharthv96 Feb 18, 2025

sidharthv96 Feb 18, 2025

sidharthv96 Feb 18, 2025

sidharthv96 Feb 18, 2025

sidharthv96 Feb 18, 2025

sidharthv96 Feb 18, 2025

sidharthv96 Feb 18, 2025

Prashant-7718 Feb 19, 2025

sidharthv96 Feb 18, 2025

sidharthv96 Feb 18, 2025

	<title>Svelte Mermaid Preview</title>
	<title>Mermaid Preview</title>

	if (theme && (theme === "dark" \|\| theme === "neo-dark" )) {
	if (theme?.endsWith("dark")) {

Release 2.0 #19

Are you sure you want to change the base?

Release 2.0 #19

Conversation

Prashant-7718 commented Feb 10, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment